<template>
  <div class="page-container-padding">
    <div>
      <span>类型：</span>
      <span>
        <el-select v-model="apporveState" @change="apporveStateChange">
          <el-option :value="-1" label="全部"></el-option>
          <el-option :value="0" label="未审批"></el-option>
          <el-option :value="1" label="已审批"></el-option>
        </el-select>
      </span>
    </div>
    <!-- 列表 -->
    <div style="margin-top: 10px;" v-loading="planListLoading">
      <div v-show="planList.length==0">
        <el-empty description="暂无未审批的方案"></el-empty>
      </div>
      <el-card v-for="(item,index) in planList" :key="index" style="margin-bottom:10px;">
        <!-- 条目信息显示 -->
        <div>
          <div style="font-size: 16px;">
            <span style="width: 80px;display: inline-block;">方案标题：</span>
            <span style="color: #0077CC;"><a style="text-decoration: underline;font-weight: 700;" target="_blank" :href="fileStorage + item.filepath ">{{ item.title }}</a> <span style="text-decoration: none;">({{ item.admin_name }})</span></span>
            <span style="color: #005599;font-size: 10px;margin-left: 50px;">{{ item.create_time }}</span>
          </div>
          <br>
          <div>
            <span style="width: 70px;display: inline-block;">生效日期：</span><span style="width: 80px;display: inline-block;">{{ item.active_date }}</span>
            <span style="width: 70px;display: inline-block;margin-left: 30px;">结束日期：</span><span>{{ item.expire_date }}</span>
          </div>
          <br>
          <div>
            <span style="width: 70px;display: inline-block;">方案类型：</span><span style="width: 80px;display: inline-block;">{{ item.category }}</span>
            <span style="width: 70px;display: inline-block;margin-left: 30px;">涉及品种：</span><span>{{ item.variety }}</span>
          </div>
          <br>
          <div>
            <span style="width: 70px;display: inline-block;">申请实操：</span><span style="width: 80px;display: inline-block;">{{ item.firm_text }}</span>
            <span style="width: 70px;display: inline-block;margin-left: 30px;">方案评级：</span><span style="width: 80px;display: inline-block;">{{ item.level_text }}</span>
          </div>
          <br>
          <div style="background-color: #F0F2F5;padding: 5px 0;">
            <span style="width: 70px;display:inline-block;">评级意见：</span><span style="display: inline-block;">{{ item.level_explain }}</span>
          </div>
          <br>
          <div>
            <span>
              <span style="font-size: 17px;font-weight: 700;color: #ff5300;">审批：</span>
              <span style="margin-right: 8px;">
                <el-select v-model="item.examine_ret">
                  <el-option :value="1" label="内部展示"></el-option>
                  <el-option :value="2" label="实盘操作"></el-option>
                  <el-option :value="3" label="方案外发"></el-option>
                </el-select>
              </span>
            </span>
          </div>
          <br>
          <div>
            <span style="font-size: 17px;font-weight: 700;color: #ff5300;vertical-align: top;">意见：</span>
            <span><el-input style="max-width:800px;margin-right:8px;" placeholder="在此输入审批的意见" type="textarea" :rows="3" v-model="item.ret_explain"></el-input></span>
            <span><el-button type="primary" @click="toSetPlanApprove(index)">确定</el-button></span>
          </div>
          <br>
          <div><span style="cursor:pointer;color: #0066FF;" @click="toShowRecord(index)">模拟跟踪记录<i :class="currentShowIndex == index?'el-icon-caret-bottom':'el-icon-caret-right'"></i></span></div>
        </div>
        <!-- 记录操作 -->
        <div v-show="currentShowIndex === index" style="border-top: 1px dashed #222;margin-top: 10px;padding-top: 10px;">
          <div v-loading="currentShowIndex==index?followTextLoading:false">
            <div style="margin: 10px 0;color:#f34700;font-size:18px;">跟踪记录：</div>
            <div style="margin-top: 10px;" v-for="ft,i in item.followList" :key="'ft'+i">
              <div><span style="color: #0066FF;margin-right: 10px;">{{ ft.active_time }}</span></div>
              <div style="line-height: 24px;text-indent: 2em;">{{ ft.description }}</div>
            </div>
            <div><el-button icon='el-icon-caret-top' type="text" @click="currentShowIndex=-1">收起记录</el-button></div>
          </div>
        </div>
      </el-card>
    </div>
    <div>
      <el-pagination
        background
        layout="prev, pager, next, jumper"
        :current-page="page"
        :page-size="pageSize"
        :total="totalCount" @current-change="paginatorPageChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { fileStorage } from '@/config'
  import { getExamineInvestment,getInvestmentFollow,putInvestPlan } from '@/api/departmentWork/investment'
  export default {
    data(){
      return {
        fileStorage: fileStorage,
        page: 1,
        pageSize: 10,
        totalCount: 0,
        apporveState: 0,
        planList: [],
        currentShowIndex: -1,
        followTextLoading: false,
        planListLoading: false
      }
    },
    mounted() {
      this.getInvestmentPlan()
    },
    methods:{
      paginatorPageChange(page){
        this.page = page
        this.getInvestmentPlan()
      },
      apporveStateChange(){
        this.page=1
        this.getInvestmentPlan()
      },
      getInvestmentPlan(){
        const params = {
          level: 1, // 只请求已评级的
          ret: this.apporveState,
          page: this.page,
          page_size: this.pageSize
        }
        this.planListLoading = true
        this.planList = []
        getExamineInvestment(params).then(res => {
          const data = res.data
          this.planList = data.plans
          this.page = data.page
          this.totalCount = data.total_count
          this.planListLoading = false
        }).catch((err)=> {this.planListLoading = false})
      },
      // 显示方案的记录
      toShowRecord(index){
        this.currentShowIndex = index
        // 获取当前数据的跟踪记录
        this.followTextLoading = true
        const planItem = this.planList[this.currentShowIndex]
        getInvestmentFollow({ plan_id: planItem.id }).then(res => {
          planItem.followList = res.data.records
          this.followTextLoading = false
        }).catch(err=> {this.followTextLoading = false})
      },
      // 确定保存审批
      toSetPlanApprove(index){
        const planItem = this.planList[index]
        if (planItem.examine_ret < 1){
          this.$baseMessage('审批结果必选', 'error')
          return false
        }
        if (planItem.ret_explain.length<1){ planItem.ret_explain=''}
        const retData = {
          examine_ret: planItem.examine_ret,
          ret_explain: planItem.ret_explain
        }
        putInvestPlan(retData, planItem.id).then(res => {
          this.$baseMessage(res.msg, 'success')
          this.getInvestmentPlan()
        })

      }
    }
  }
</script>

<style>
</style>
